<template>
  <van-search v-model="value" show-action :placeholder="router.currentRoute.value.query.val" background="#2BCDDD"
    class="inp">
    <template #left>
      <div class="left" @click="fun"><van-icon name="arrow-left" /></div>
    </template>
    <template #action>
      <div class="right" @click="onClickButton">搜索</div>
    </template>
  </van-search>

  <div class="box">
    <ul>
      <p class="title"><span></span> 垃圾分类</p>
      <li @click="fun2(item.garbageName, item.garbagePhoto, item.garbageType)" :key="index"
        v-for="(item, index) in stores.searchData1">
        <img :src="item.garbagePhoto" alt="" />
        <p>{{ item.garbageType }}</p>
      </li>
    </ul>
    <ul>
      <p class="title"><span></span> 兑换商城</p>
      <li @click="goDetail(item.gnId)" :key="index" v-for="(item, index) in stores.searchData">
        <img :src="item.photo" alt="" />
        <p>{{ item.note }}</p>
      </li>
    </ul>
  </div>

</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ExchangeInfo } from "../stores/ExchangeOrder";
import { search } from "../api/index";
import { showDialog } from "vant";
import { useListStore } from "../stores/list";
import { useDetailStore } from "../stores/detail";
import dayjs from "dayjs";
const detailStore = useDetailStore();
const listStore = useListStore();
const stores = ExchangeInfo();


const router = useRouter();
const value = ref();
const fun = () => {
  // 返回上一级
  router.go(-1);
};

// 点击搜索
const onClickButton = (val1) => {
  val1 = value.value;
  console.log(val1);

  if (val1 == undefined) {
    showDialog({
      message: "你没有输入内容",
    }).then(() => {
      // on close
    });
    return;
  }
  search(val1).then((res) => {
    stores.searchData = res.data.data.goodsList;
    if (stores.searchData == null && stores.searchData1 == null) {
      router.push("/SearchNoGoods");
    } else {
      router.push({
        path: "/SearchGoods",
        query: {
          val: val1,
        },
      });
    }
  });

  search(val1).then((res) => {
    stores.searchData1 = res.data.data.garbageTypeList;
    if (
      val1 == "" ||
      (stores.searchData1 == null && stores.searchData == null)
    ) {
      router.push("/SearchNoGoods");
    } else {
      router.push({
        path: "/SearchGoods",
        query: {
          val: val1,
        },
      });
    }
  });
};

// 点击历史删除
const Delete = () => {
  window.localStorage.removeItem("List");
  location.reload();
};

const fun2 = (name, type, type1) => {
  router.push({
    path: "/GarbageDetails",
    query: {
      name: name,
      type: type,
      type1: type1
    },
  });
};

// 传值,跳转到兑换商城详情
// const fun1 = (name) => {
//   // console.log(name)

//   // listStore.list = stores.searchData[name]
//   console.log(listStore.getInfo)
//   // console.log(listStore.list)
//   router.push({
//     path: "/ShopDetail",
//     // query: {
//     //   name: name,
//     // },
//   });
// };
function goDetail(goodsid) {

  detailStore.getDetailInfo(goodsid).then((res) => {
    detailStore.images = res.data.data

    router.push({
      path: '/ShopDetail',
    });

  });


}
</script>

<style lang="less" scoped>
.box {
  ul {
    .title {
      font-weight: 600;
      margin: 5vw;
      text-indent: 2vw;
      font-size: 18px;

      span {
        display: inline-block;
        height: 3.5vh;
        width: 1vw;
        background-color: #ff5e81;
        position: relative;
        top: 0.8vh;
        border-radius: 3vw;
      }
    }

    li {
      display: flex;
      height: 13.333vh;
      width: 90vw;
      line-height: 13.333vh;
      border-bottom: 1px solid #f3f3f3;
      margin: 0 auto;
      font-weight: 600;
      margin-top: 10px;

      img {
        height: 80%;
      }

      p {
        margin-left: 4.667vw;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}

.active {
  color: #ff6e8f;
}

.left {
  color: #fff;
  font-size: 6.333vw;
  margin-right: 3.333vw;
}

.van-search__content {
  border-radius: 6.667vw;
}

.right {
  background-color: #fff;
  color: #2bcddd;
  border-radius: 6.667vw;
  width: 60px;
  text-align: center;
  font-size: 2.133vw;
}
</style>
